<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-button @click="openDialog('add')" type="primary"
                    >新增根节点
                    </el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <el-table
                :data="tableData"
                style="width: 100%;margin-bottom: 10px;"
                row-key="areaId"
                border
                :default-expand-all="false"
                :lazy="true"
                :load="loadTreeData"
                :tree-props="{ children: 'children', hasChildren: 'childNumber' }"
        >
            <el-table-column prop="fullName" label="地区全称" align="center">
            </el-table-column>
            <el-table-column prop="shortName" label="地区简称" align="center">
            </el-table-column>
            <el-table-column prop="status" label="启用状态" align="center">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status" :active-value=1 :inactive-value=0
                               @change="changeEnable(scope.row)" style="padding-right:15px">
                    </el-switch>
                    <span :class="scope.row.status === 1 ? 'green' : 'red'">{{scope.row.status === 1 ? "开启" : "禁用"}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="sortBy" label="排序" align="center" width="80px">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                            @click="addArea('add', scope.row)"
                            size="small"
                            type="primary"
                            icon="el-icon-plus"
                            v-if="btns&&btns.includes('add')"
                    >新增子节点
                    </el-button
                    >
                    <el-button
                            @click="editArea(scope.row)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="btns&&btns.includes('edit')"
                    >编辑
                    </el-button
                    >
                    <el-button
                            @click="deleteAreas(scope.row)"
                            size="small"
                            type="danger"
                            icon="el-icon-delete"
                            v-if="btns&&btns.includes('delete')"
                    >删除
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                :before-close="closeDialog"
                :title="dialogTitle"
                :visible.sync="dialogFormVisible"
                class="dialogs"
                width="380px"
        >
            <el-form :model="form" :rules="rules" label-width="80px" ref="areaForm">
                <el-form-item label="父地区ID" prop="parentId" v-if="type === 'edit'">
                    <el-input disabled v-model="form.parentId"></el-input>
                </el-form-item>
                <el-form-item label="地区全称" prop="fullName">
                    <el-input autocomplete="off" v-model="form.fullName"></el-input>
                </el-form-item>
                <el-form-item label="地区简称" prop="shortName">
                    <el-input autocomplete="off" v-model="form.shortName"></el-input>
                </el-form-item>
                <el-form-item label="地区编码" prop="adCode">
                    <el-input autocomplete="off" v-model="form.adCode"></el-input>
                </el-form-item>
                <el-form-item label="经度" prop="lng">
                    <el-input autocomplete="off" v-model="form.lng"></el-input>
                </el-form-item>
                <el-form-item label="纬度" prop="lat">
                    <el-input autocomplete="off" v-model="form.lat"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sortBy">
                    <el-input-number
                            v-model="form.sortBy"
                            :min="1"
                            :max="100"
                            size="small"
                            style=""
                    ></el-input-number>
                </el-form-item>
                <el-form-item label="是否禁用" prop="status">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button @click="enterDialog" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索

    import {createArea, deleteArea, enableArea, getAreaList, loadChildData, updateArea} from "@/api/api";
    import infoList from "@/components/mixins/infoList";
    import {toSQLLine} from "@/utils/stringFun";

    const methodOptions = [
        {
            value: "POST",
            label: "创建",
            type: "success",
        },
        {
            value: "GET",
            label: "查看",
            type: "",
        },
        {
            value: "PUT",
            label: "更新",
            type: "warning",
        },
        {
            value: "DELETE",
            label: "删除",
            type: "danger",
        },
    ];

    export default {
        name: "Area",
        mixins: [infoList],
        data() {
            return {
                lazyFlag: false,
                btns: [],
                statusOptions: [
                    {
                        value: 0,
                        label: "禁用",
                    },
                    {
                        value: 1,
                        label: "开启",
                    },
                ],
                listApi: getAreaList,
                dialogFormVisible: false,
                dialogTitle: "新增地区",
                form: {
                    name: "",
                    parentId: "",
                    areaId: "",
                    sortBy: null,
                    status: null,
                },
                methodOptions: methodOptions,
                type: "",
                rules: {
                    fullName: [{required: true, message: "请输入地区全称", trigger: "blur"}],
                    shortName: [{required: true, message: "请输入地区简称", trigger: "blur"}],
                    adCode: [{required: true, message: "请输入地区表面", trigger: "blur"}],
                    sortBy: [{required: true, message: "请输入排序", trigger: "blur"}],
                    status: [
                        {required: true, message: "请选择启用状态", trigger: "blur"},
                    ],
                },
            };
        },
        methods: {
            async loadTreeData(tree, treeNode, resolve) {
                const {areaId} = tree;
                try {
                    const res = await loadChildData(areaId);
                    resolve(res.data);
                } catch (e) {
                }
            },
            // 排序
            sortChange({prop, order}) {
                if (prop) {
                    this.searchInfo.orderKey = toSQLLine(prop);
                    this.searchInfo.desc = order == "descending";
                }
                this.getTableData();
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.currPage = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            initForm() {
                this.$refs.areaForm.resetFields();
                this.form = {
                };
            },
            closeDialog() {
                this.initForm();
                this.dialogFormVisible = false;
            },
            openDialog(type) {
                switch (type) {
                    case "add":
                        this.dialogTitle = "新增地区";
                        break;
                    case "edit":
                        this.dialogTitle = "编辑地区";
                        break;
                    default:
                        break;
                }
                this.type = type;
                this.dialogFormVisible = true;
            },
            addArea(type, row) {
                this.type = type;
                this.form.parentId = row.areaId;
                this.dialogFormVisible = true;
            },
            editArea(row) {
                // const res = await getApiById({ id: row.ID })
                this.form = row;
                // console.log(this.form)
                this.openDialog("edit");
            },
            async deleteAreas(row) {
                this.$confirm("此操作将永久删除该地区, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await deleteArea(row.areaId);
                        if (res.statusCode == 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            //启用/停用
            async changeEnable(row) {
                const res = await enableArea(row.areaId)
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "启用/停用成功",
                        showClose: true,
                    });
                }
                this.getTableData();
            },
            async enterDialog() {
                this.$refs.areaForm.validate(async (valid) => {
                    if (valid) {
                        switch (this.type) {
                            case "add": {
                                // console.log(this.form)
                                const res = await createArea(this.form);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "添加成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }
                                break;
                            case "edit": {
                                const res = await updateArea(this.form);
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "编辑成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }
                                break;
                            default: {
                                this.$message({
                                    type: "error",
                                    message: "未知操作",
                                    showClose: true,
                                });
                            }
                                break;
                        }
                    }
                });
            },
        },
        filters: {
            methodFiletr(value) {
                const target = methodOptions.filter((item) => item.value === value)[0];
                // return target && `${target.label}(${target.value})`
                return target && `${target.label}`;
            },
            tagTypeFiletr(value) {
                const target = methodOptions.filter((item) => item.value === value)[0];
                return target && `${target.type}`;
            },
        },
        async created() {
            await this.getTableData();
            this.btns = this.$route.meta.btnList
        }
    };
</script>
<style scoped lang="scss">
    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }
    }

</style>
